import React from 'react'
import * as echarts from 'echarts';
import { useEffect } from 'react'
// 导入数据类型
import { KdataType } from '@/types/layout'
type Props = {
    kdata: KdataType, // 接收的kdata 数据类型
    id: string, // 盒子id 属性
    w?: string,  // 盒子的宽度属性
    h?: string  // 盒子的高度属性
}

export default function Kechart({ kdata, id, w, h }: Props) {
    // useEffect 执行时间: 等页面dom 加载或更新完才触发
    useEffect(() => {
        let k_box = document.querySelector('#' + id) as HTMLElement
        // console.log('k_box', k_box);
        var myChart = echarts.init(k_box);
        // console.log('kdata', kdata);
        window.addEventListener('resize', function () {
            // console.log('resize111');
            myChart.resize();
        });
        myChart.setOption({
            title: {
                text: '股票今日大盘',
                textStyle: {
                    color: 'red',
                },
                left: 'left',
                subtext: '茅台股票'
            },
            tooltip: {},
            xAxis: {
                data: kdata.x
            },
            yAxis: {},
            series: [
                {
                    type: 'candlestick',
                    data: kdata.val
                }
            ]
        })
    }, [])
    return (
        <div style={{
            width: w ? w : '500px',
            height: h ? h : '500px',
            //border: '1px solid lightgray'
            padding: '10px',
            boxSizing: 'border-box'
        }} id={id}></div>
    )
}